<template>
    <el-container class="layout-container-demo">
        <el-aside width="200px">
            <el-scrollbar>
                <!--default-openeds 默认打开  -->
                <!-- <el-menu :default-openeds="['1']" :router='true'>
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon>
                                <message />
                            </el-icon>Navigator One
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/register">Option 1</el-menu-item>
                            <el-menu-item index="/register">Option 2</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon>
                                <icon-menu />
                            </el-icon>Navigator Two
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="2-1">Option 1</el-menu-item>
                            <el-menu-item index="2-2">Option 2</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                </el-menu> -->

                <el-menu default-active="0" :unique-opened="true" class="el-menu-vertical-demo">
                    <template v-for="(item, index) in menuList" :key="index">
                        <router-link :to="item.path" v-if="!item.children" :key="index">
                            <el-menu-item :index="index + ''">
                                 
                                <span>{{ item.name }}</span>
                            </el-menu-item>
                        </router-link>

                        <el-sub-menu :index="index + ''" v-else>
                            <template #title>
                                <el-icon>
                                    <component :is="item.icon"></component>
                                </el-icon>
                                <span>{{ item.name }}</span>
                            </template>
                            <router-link :to="item.path + '/' + sub.path" v-for="(sub, subIndex) in item.children" :key="subIndex">
                                <el-menu-item :index="index + '-' + subIndex">
                                    <el-icon>
                                        <component :is="sub.icon"></component>
                                    </el-icon>
                                    <span>{{ sub.name }}</span>
                                </el-menu-item>
                            </router-link>
                        </el-sub-menu>
                    </template>
                </el-menu>

            </el-scrollbar>

        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <div class="toolbar">
                    <el-dropdown>
                        <el-icon style="margin-right: 8px; margin-top: 1px">
                            <setting />
                        </el-icon>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>View</el-dropdown-item>
                                <el-dropdown-item>Add</el-dropdown-item>
                                <el-dropdown-item>Delete</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <span>Tom</span>
                </div>
            </el-header>

            <el-main>
                <!-- <el-scrollbar> -->
                    <el-table :data="tableData">
            <el-table-column prop="date" label="Date" width="140" />
            <el-table-column prop="name" label="Name" width="120" />
            <el-table-column prop="address" label="Address" />
          </el-table>

                    <!-- <router-view/> -->
                    <!-- <router-view></router-view> -->
                <!-- </el-scrollbar> -->
            </el-main>
        </el-container>
    </el-container>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
import router from '../router/index'

const item = {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
}
const tableData = ref(Array.from({ length: 20 }).fill(item))
const menuList = ref([])

onMounted(() => {
    menuList.value = router.options.routes
    console.log(router.options.routes)
})
</script>

<style scoped>
.layout-container-demo .el-header {
    position: relative;
    /* background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary); */
    background: #fff;
    border-bottom: #dbdcdd solid 1px;
}
.layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
    /* background: var(--el-color-primary-light-8); */
    background: #f6f6f6;
    height: 100vh;
}
.layout-container-demo .el-menu {
    border-right: none;
}
.layout-container-demo .el-main {
    padding: 0;
}
.layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
}
</style>
